import { Button,message, Form, AutoComplete, Card, Radio, Row, Col } from 'antd';
import React, {
  useEffect,
  useState
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { initFileUploadTask, queryItemType } from './service';
import ProForm from '@ant-design/pro-form';
import {getStudentSearchOptions, selectStudent} from './service';
import Course from './components/Course'
import FunVideo from './components/FunVideo'
import InterVideo from './components/InterVideo'
import Video from './components/Video'
import Quiz from './components/Quiz'

const { Option } = AutoComplete;
const TableList: React.FC<{}> = (props: any) => {
  const { activityId ,itemId} = props.location.query
  const [form] = Form.useForm();
  const [type,setType] = useState<string>('')
  const [lock,setLock] = useState(false)
  const [stepList,setStepList] = useState<any>([])
  const [uid, setUid] = useState<any>()
  const [searchUid,setSearchUid] = useState<any>()
  const [options, setOptions] = useState<{ value: string }[]>([]);
  const [params,setParams] = useState<any>({})
  const onSelectUser = (data: any, option: any) => {
    setUid(option.key)
  };

  const onSearchUser = async (key: string) => {
    try {
      const data = await selectStudent(activityId,key)
      const list = getStudentSearchOptions(key, data)
      setOptions( list );
    } catch (error) {
      message.error('搜索失败');
    }
  };
  const onFinish = async () => {

    if (!activityId) {
      message.error('活动ID不能为空')
      return
    }
    if(!itemId){
      message.error('条目ID不能为空')
      return
    }
    setLock(true)
    setTimeout(()=>{
      setLock(false)
    },5000)
    const res = await initFileUploadTask({
      activityId,
      itemId
    })
   if(res.code === 200){
     message.success('已加入下载列表，5s后可再次导出数据')
   } else {
     message.error(res.message)
   }
  }
  const getStepList = async () => {
    const res = await queryItemType({
      activityId,
      itemId
    })
    setStepList(res.data)
    const firstLabelItem = res.data[0]
    setType(`${firstLabelItem.stepId}&${firstLabelItem.stepType}`)
    setParams({
      activityId,
      itemId,
      stepId:firstLabelItem.stepId
    })
  }
  const resolveType = () => {
    return type.split('&')[1]
  }
  const resolveStepId = () => {
    return type.split('&')[0]
  }
  useEffect(()=>{
    getStepList()
  },[])
  useEffect(()=>{
    setParams({
      activityId,
      itemId,
      stepId:resolveStepId(),
    })
  },[type])
  return (
    <PageContainer>
      <ProForm.Item
        >
        <Radio.Group
          style={{marginBottom: 10}}
          value={type}
          onChange={e => setType(e.target.value)}
        >
          {
            stepList.map((item: any)=>(
              <Radio.Button
                style={{marginRight: 10}}
                value={`${item.stepId}&${item.stepType}`}
              >
                {item.stepName}
              </Radio.Button>
            ))
          }
        </Radio.Group>
      </ProForm.Item>
      <Card style={{'marginBottom':'0'}}>
        <Form form={form} >
          <Row gutter={[16,16]} >
          <Col span={8}>
            <Form.Item label="昵称/手机号" name="key">
              <AutoComplete
                onSelect={onSelectUser}
                onSearch={onSearchUser}
                placeholder="请输入"
                onChange={(value) => {
                  if (!value) {
                    setUid()
                  }
                }}
              >
                {options.map((item) => (
                  <Option key={item.id}  label={item.label} value={item.label}>
                    {item.label}
                  </Option>
                ))}
                </AutoComplete>
              </Form.Item>
            </Col>
            <Col span={8} style={{display: 'flex'}}>
                <Button
                  style={{marginRight:'10px',textAlign: 'right'} }
                  onClick={()=>{
                    setUid('')
                    setSearchUid('')
                    form.resetFields()
                  }}>

                  重置
                </Button>
                <Button
                  type="primary"
                  style={{marginRight:'10px',textAlign: 'right'}}
                  onClick={()=>{
                    setSearchUid(uid)
                  }}
                  >
                  查询
                </Button>
            </Col>
            <Col span={8} style={{textAlign: 'right'}}>
              <Button
                type="primary"
                disabled={lock}
                htmlType="submit"
                style={{marginRight:'10px',textAlign: 'right'}}
                onClick={onFinish}
                >
                导出条目数据
              </Button>
            </Col>
          </Row>
        </Form>
      </Card>

      {
        resolveType() === '0' ? <Course params={params} uid={searchUid}/> : null
      }
      {
        resolveType() === '1' ? <InterVideo params={params} uid={searchUid}/> : null
      }
      {
        resolveType() === '2' ? <Video params={params} uid={searchUid}/> : null
      }
      {
        resolveType() === '3' ? <FunVideo params={params} uid={searchUid}/> : null
      }
      {
        resolveType() === '4' ? <Quiz params={params} uid={searchUid}/> : null
      }
      {
        resolveType() === '6' ? <Course params={params} uid={searchUid}/> : null
      }

    </PageContainer>
  );
};

export default TableList;
